<template>
    <div class="question">

        <!--S内容-->
        <div id="question" :class="question_class" v-show="show_show">
            <h2>答题开红包</h2>

            <!--S问题-->
            <div class="ask">
                <span>问：</span>
                {{data[0]}}
            </div>
            <!--E问题-->

            <!--S选择题-->
            <choice-options
                    v-if="type === 'choice'"
                    :options="choice_options"
                    :hint="hint"
                    @change="setAnswer"
            ></choice-options>
            <!--E选择题-->

            <!--S问答题-->
            <div v-else class="answer-question">
                <div v-if="hint !== ''" class="hint">
                    {{hint}}
                </div>
                <cube-input
                        v-model="answer"
                        placeholder="请输入答案"
                >
                </cube-input>
            </div>
            <!--E问答题-->

            <!--S关闭-->
            <div class="buttons">
                <cube-button
                        v-if="!reset"
                        class="button"
                        @click="$emit('close')"
                >
                    关闭
                </cube-button>
                <cube-button
                        v-else
                        class="button"
                        @click="$emit('reset')"
                >
                    重开红包
                </cube-button>
                <cube-button
                        class="button"
                        @click="confirm"
                >
                    确认
                </cube-button>
            </div>
            <!--E关闭-->
        </div>
        <!--E内容-->

    </div>
</template>

<script>
// 选择题弹窗
import ChoiceOptions from "./components/choice-options"
export default {
    name: "question",
    data() {
      return {
          // 是否显示状态
          show_show: false,
          // 是否回答正确
          bingo: true,
          // 显示隐藏动画class
          question_class: 'hide',
          // 答案
          answer: "",
          // 错误文字提示
          hint: '',
          // 选择题选项
          choice_options: []
      }
    },
    props: {
        // 是否显示
        is_show: {
          type: Number,
          default: 0
        },
        // 问答类型
        type: {
          type: String,
          default: 'choice'
        },
        // 是否支持重置红包
        reset: {
            type: Boolean,
            default: false
        },
        // 问答数据
        data: {
            type: Array,
            default() {
                return []
            }
        }
    },
    watch: {
        data() {
            if(this.type === 'choice') {
                this.choiceOptions()
            }
        },
        is_show() {
            this.toggle(true)
        }
    },
    components: {
        ChoiceOptions
    },
    created() {
        this.toggle(true)
        if(this.type === 'choice') {
            this.choiceOptions()
        }
    },
    methods: {
        /**
         * 隐藏显示操作
         */
        toggle(show) {
            if(show) {
                this.show_show = true
                setTimeout(() => {
                    this.question_class = 'show'
                },100)
            }
        },
        /**
         * 初始化选择题选项
         */
        choiceOptions() {
            this.data.forEach((item,index) => {
                if(index > 1) {
                    this.choice_options.push({
                        label: item,
                        value: index - 2
                    })
                }
            })
        },
        /**
         * 选择题设置答案
         * @param res
         */
        setAnswer(res) {
            this.answer = res
        },
        /**
         * 确认回答
         */
        confirm() {
            // 是否回答正确
            if(!this.bingo) {
                this.hint = '回答错误，请点击“重开红包”按钮'
                return false
            }
            // 选择题
            if(this.type === 'choice') {
                if(typeof this.answer === 'string' && this.answer.trim() === '') {
                    this.hint = '请选择正确答案'
                    return false
                }
                if(this.answer !== parseInt(this.data[1])) {
                    this.hint = '回答错误'
                    if(this.reset) {
                        this.bingo = false
                        this.hint += '，请重开红包'
                    }
                    return false
                } else {
                    this.hint = ''
                }
            } else {
                // 问答题
                if(this.answer.trim() === '') {
                    this.hint = '请先答题'
                    return false
                }
                if(this.answer !== this.data[1]) {
                    this.hint = '回答错误'
                    if(this.reset) {
                        this.bingo = false
                        this.hint += '，请重开红包'
                    }
                    return false
                }
            }
            this.$emit('confirm')
        }
    }
}
</script>

<style scoped lang="less" src="./question.less"></style>
